<template>
    <div class="chargritems">
        <div class="query">
            <el-select v-model="value" placeholder="所属小区" class="selection">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <!-- 日期 -->
            <div class="block">
                <!-- <span class="demonstration">默认</span> -->
                <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" class="selectdate">
                </el-date-picker>
            </div>
            <!-- 查询和重置按钮 -->
            <el-button type="primary" class="chaxun" @click="select"><i class="el-icon-search" ></i>查询</el-button>
            <el-button class="reaseat" @click="reasert"><i class="el-icon-refresh-right" ></i>重置</el-button>
        </div>
        <!-- 数据表格 -->
        <div class="datalists">
            <div class="datalistsname">数据列表</div>
            <!-- 添加按钮 -->
            <el-button type="primary" class="append" @click="exportdata">导出数据</el-button>
             <!-- 导入数据 -->
            <!-- <el-button type="primary" class="ImportData" @click="ImportData">导入数据</el-button> -->
            <!-- 数据表格 -->
            <div class="datatable">
                <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
                    <el-table-column
                    prop="time"
                    label="时间"
                    width="203">
                    </el-table-column>
                    <el-table-column
                    prop="Propertymanagementfee"
                    label="物业费"
                    width="203">
                    </el-table-column>
                    <el-table-column
                    prop="electricitybill"
                    label="电费"
                    width="203">
                    </el-table-column>
                    <el-table-column
                    prop="waterrate"
                    label="水费"
                    width="203">
                    </el-table-column>
                    <el-table-column
                    prop="Totalamount"
                    label="合计金额"
                    width="203">
                    </el-table-column>
                    <el-table-column
                    prop="payoutrate"
                    label="支付率"
                    width="203">
                    </el-table-column>
                </el-table>
                <Pagecurren :totalpage="totalpage" :currentPage2="currentPage2" @send="getpage" @send-pagelimit="getpagelimit" :pagelimit="pagelimit"></Pagecurren>
            </div>
        </div>
    </div>
</template>

<script>
import Pagecurren from '../components/Pagecurren.vue'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
import { readExcelToJson, saveJsonToExcel } from '../utils'
export default {
    components:{
        Pagecurren
    },
    computed:{
        ...mapState(['num'])
    },
    watch:{
        currentPage2:{
            handler(val,oldval){
                this.tableData=this.datalists.slice((val-1)*this.pagelimit,val*this.pagelimit)
            },
        },
        pagelimit:{
            handler(val,oldval){
                this.tableData=this.datalists.slice((this.currentPage2-1)*val,val*this.currentPage2)
            }
        },
    },
    methods:{
        getpage(data){
            this.currentPage2=data
        },
        getpagelimit(data){
            this.pagelimit=data
        },
        exportdata(){
            console.log('导出数据')
            saveJsonToExcel(this.datalists, 'cost.xlsx')
        },
        select(){
            console.log('查询')
        },
        reasert(){
            console.log('重置')
        },
        ...mapMutations(['changeTotalpage']),
    },
    mounted() {
        this.$axios.get('http://127.0.0.1/costlists',{
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            },
        }).then(res=>{
            this.datalists=res.data
            this.totalpage=res.data.length
            this.tableData=res.data.slice((this.currentPage2-1)*this.pagelimit,this.currentPage2*this.pagelimit)
        }).catch(err=>{
            console.log(err)
        })
    },
    data(){
        return{
             restaurants: [],
                state: '',
                timeout:  null,
                value:[],
                value1:[],
                options: [{
                value: '选项1',
                label: '物业费'
                }, {
                value: '选项2',
                label: '停车管理费'
                }, {
                value: '选项3',
                label: '车位管理费'
                }, {
                value: '选项4',
                label: '车位管理费'
                }, {
                value: '选项5',
                label: '车位管理费'
                }],         
            // tableData:[
            //     {
            //         time: '2021-01',
            //         Propertymanagementfee: '26552',
            //         electricitybill: '26552',
            //         waterrate:'26552',
            //         Totalamount:'26552',
            //         payoutrate:'100%',
            //     }, 
            //     {
            //         time: '2021-02',
            //         Propertymanagementfee: '43234',
            //         electricitybill: '43234',
            //         waterrate:'43234',
            //         Totalamount:'43234',
            //         payoutrate:'100%',
            //     }, 
            //     {
            //         time: '2021-03',
            //         Propertymanagementfee: '43345',
            //         electricitybill: '43345',
            //         waterrate:'43345',
            //         Totalamount:'43345',
            //         payoutrate:'100%',
            //     }, 
            //     {
            //         time: '2021-04',
            //         Propertymanagementfee: '56454',
            //         electricitybill: '56454',
            //         waterrate:'56454',
            //         Totalamount:'56454',
            //         payoutrate:'100%',
            //     }, 
            // ]
                totalpage:300,
                currentPage2:1,
                pagelimit:10,
                tableData:[],
                datalists:[],
        }
    }
}
</script>

<style lang="scss" scoped>
    .chargritems{
        width: 1260px;
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        .query{
            width: 1260px;
            height: 95px;
            display: flex;
            align-items: center;
            background-color: #fff;
            box-sizing: border-box;
            border:  1px solid rgba(233, 233, 233, 1);
            padding-left: 20px;
            position: relative;
            .selectdate{
                height: 35px !important;
                ::v-deep .el-input__inner{
                    height: 35px !important;
                }
            }
            .selection{
                width: 136px;
                margin-right: 10px;
                ::v-deep .el-input__inner{
                    height: 35px;
                }
            }
            .searchtext{
                width: 180px;
                margin-right: 10px;
                ::v-deep .el-input__inner{
                    height: 35px;
                }
            }
            // 查询按钮
            .chaxun{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #0079fe !important;
                .el-icon-search{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .chaxun:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            // 重置按钮
            .reaseat{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff !important;
                .el-icon-refresh-right{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .reaseat:hover{
                border-color: #0079fe !important;
                color: #0079fe !important;
            }
            
        }
        // 数据列表
        .datalists{
            width: 1260px;
            height: 1196px;
            padding: 0 20px;
            margin-top: 10px;
            background-color: #fff;
            border: 1px solid rgba(233, 233, 233, 1);
            position: relative;
            box-sizing: border-box;
            // 数据列表名字名称
            .datalistsname{
                margin-top: 40px;
                width: 57px;
                height: 18px;
                line-height: 18px;
                color: #666666;
                font-size: 14px;
            }
            // 添加数据按钮
            .append,.appends,.ImportData{
                min-width: 80px;
                padding: 0 5px;
                height: 35px;
                position: absolute;
                right: 20px;
                top: 23px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                background-color: #0079fe !important;
                .el-icon-plus,.el-icon-folder-add{
                    font-size: 16px;
                    margin-right: 5px;
                    font-weight: 700;
                }
            }
            .ImportData{
                position: absolute;
                right: 120px;
                top: 23px;
            }
            .append:hover,.appends:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            .appends{
                position: absolute;
                padding: 0 2px;
                right: 120px;
                top: 23px;
            }
            // 数据表格
            .datatable{
                margin-top: 20px;
                ::v-deep .has-gutter th{
                    height: 45px !important;
                    background-color: #f5f5f5;
                    box-sizing: border-box;
                    padding: 0 !important;
                    font-size: 14px;
                    color: #666666;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
                }
                ::v-deep .el-table__row td{
                    height: 50px !important;
                    padding: 0 !important;
                }
                ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                    background-color: #f9f9f9;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(1){
                    color: #0079fe !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(2){
                    color: #666 !important;
                    // text-align: center !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(4){
                    color: #999 !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                    // text-align: center;
                    color: #999;
                    // cursor: pointer;
                }
                // ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                //     cursor: pointer;
                //     text-decoration: underline !important;
                //     // color: #4a4a4a;
                // }
                ::v-deep .el-table__row .el-table__cell{
                    color: #666666;
                    font-size: 12px;
                }
                ::v-deep .el-table__row:hover{
                    background-color: inherit !important;
                }
                
            }
        }
    }
</style>